<template>
	<view class="content">
		<view class="header">
			<view class="header-logo">
				<image src="../../static/index/heade-logo-tuya.png" mode=""></image>
			</view>
			<view class="logo">
				<image src="../../static/index/logo-tuya.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="main-s">
				<view class="main-item" v-for="(item, index) in data.swiperData" :key="index">
					<view class="heng">
						<image class="banner" :src="item.cover_url" mode="widthFix"></image>
						<swiper class="swiper" circular :indicator-dots="data.indicatorDots" :vertical="false">
							<swiper-item v-for="(ite, ind) in item.list" :key="ind">
								<view class="swiper-item" @click="toPage(ite, index)">
									<image :src="ite.cover_url"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			
			<view class="main-tip">
				<image class="title" style="margin-left: 30rpx;" src="../../static/index/参观指南@2x-tuya.png" mode="widthFix"></image>
				<view class="main-item">
					<view class="text">北京市朝阳区</view>
					<view class="text">某某路某号艺术区</view>
				</view>
				
				<view class="main-item">
					<view class="text">开放时间</view>
					<view class="text">周二—周日11:00-21:00（ 最后入场时间 20:00 ）每周一闭展</view>
				</view>
				
				<view class="main-item">
					<view class="text">联系方式</view>
					<view class="text">电话：010-18180188</view>
					<view class="text">邮箱：onke@mr.com</view>
				</view>
				
				<view class="main-item">
					<view class="text">A-01, Art Zone, XX Road, Chaoyang District, Beijing.</view>
				</view>
				
				<view class="main-item">
					<view class="text">Opening Hours: Tuesd</view>
					<view class="text">Opening Hours:Tuesday to Sunday 11:00-21:00 (last admission at 20:00)Closed on Mondays.</view>
				</view>
				
				<view class="main-item">
					<view class="text">Contact Information:</view>
					<view class="text">Contact Information:Phone: 010-181801888Email: onke@mr.com</view>
				</view>
			</view>
		</view>
		
		<TabBar :current="0"></TabBar>
	</view>
</template>

<script setup>
import TabBar from '@/components/TabBar.vue';
import { recommendData } from '@/request/api/index.js';

import { ref, reactive, onMounted } from 'vue';
	
const bannerpage = ref(0);
const data = reactive({
	indicatorDots: true,
	swiperData: [],
	activeIndex: 0,
	offsetTop: 0,
	tabs: [],
})

onMounted(() => {
	getData();
})

// 首页信息
const getData = async () => {
	try {
		const resultData = await recommendData();
		data.swiperData = resultData.data.reverse();
	} catch (e) { }
}

// 资讯详情
const toPage = (e, index) => {
	uni.navigateTo({
		url: `/pages/index/message?id=${e.content_id}&index=${index}`
	})
}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
			.logo >image {
				width: 226rpx;
				height: 34rpx;
				position: absolute;
				top: 100rpx;
				left: 20rpx;
			}
		}
		.main {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 70rpx 70rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			padding-top: 30rpx;
			.main-item {
				position: relative;
				.title {
					width: 356rpx;
				}
				.banner {
					height: 578rpx;
					overflow: hidden;
				}
				.banner >image{
					width: 100%;
				}
				
				// 横向				
				.row {
					width: 100%;
					position: absolute;
					top: 0;
					z-index: 9;
				}
			}
			
			.main-tip {
				margin-top: 20rpx;
				padding: 0rpx 56rpx;
				margin-bottom: 300rpx;
				.title {
					width: 476rpx;
					margin-left: 0rpx !important;
				}
				.main-item {
					margin-bottom: 34rpx;
					.text {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1C1919;
						line-height: 36rpx;
					}
				}
			}
		}
		
		
		.main {
			::v-deep .swiper {
				height: 578rpx
			}
			.swiper-item {
				width: 100%;
				text-align: center;
				height: auto;
				image {
					width: 100%;
					height: 578rpx
				}
			}
			
			.shu {
				height: 900rpx;
				.banner {
					width: 356rpx;
					height: 182rpx;
					padding-left: 70rpx;
				}
				
				::v-deep .uni-swiper-dot-active {
					width: 16px !important;
					height: 6rpx;
					border-radius: 5rpx;
					background-color: red !important;
				}
				::v-deep .wx-swiper-dot {
					// 指示点元素默认样式
					width: 12rpx !important;
					height: 12rpx !important;
					background: #D8D8D8 !important;
					border-radius: 50% !important;
				}
		
				::v-deep .wx-swiper-dot-active {
					// 指示点元素激活（当前选中）状态样式
					width: 12rpx !important;
					height: 26rpx !important;
					background-color: #D20015 !important;
					border-radius: 6rpx !important;
				}
				
				::v-deep .wx-swiper-dots { // 指示点整个区域
					margin-top: 230rpx;
					margin-right: 40rpx;
				}
			}
			
			
			.heng {
				height: 800rpx;
				position: relative;
				.banner {
					width: 262rpx;
					height: 346rpx;
					padding-left: 60rpx;
					z-index: 9;
					position: absolute;
				}
				.swiper {
					width: 100%;
					height: 630rpx;
					position: absolute;
					top: 100rpx;
				}
				.swiper-item {
					height: 500rpx;
				}
				::v-deep .uni-swiper-dot-active {
					width: 16px !important;
					height: 6rpx;
					border-radius: 5rpx;
					background-color: red !important;
				}
				::v-deep .wx-swiper-dot {
					// 指示点元素默认样式
					width: 12rpx !important;
					height: 12rpx !important;
					background: #D8D8D8 !important;
					border-radius: 50% !important;
				}
				
				::v-deep .wx-swiper-dot-active {
					// 指示点元素激活（当前选中）状态样式
					width: 26rpx !important;
					height: 12rpx !important;
					background-color: #D20015 !important;
					border-radius: 6rpx !important;
				}
				
				::v-deep .wx-swiper-dots { // 指示点整个区域
					margin-left: 250rpx;
				}
			}
		}
	}
</style>
